import React, { useState } from "react"
import { Link } from "umi"
import { useLocation, useHistory } from "react-router"
import { Table, Button, Input, Pagination, Modal, Radio } from "antd"

import styles from "./hospitalManagement.less"
import CommonModal from "@/components/CommonModal"




const hospitalManagement: React.FC = () => {

  let [current, setCurrent] = useState<number>(1)
  let [newHospitalModal, setNewHospitalModal] = useState<boolean>(false) // 新建医院弹框
  let [RadioValue, setRadioValue] = useState<number>(1) // 本院、外院

  // 本院、外院事件 
  const radioOnChange = (val: any) => {
    setRadioValue(val.target.value)
  }

  // 查看组员
  const viewGroupMembers = (record: any) => {
    console.log(record)
  }

  // 删除
  const del = (record: any) => {
    console.log(record)
  }

  // 编辑
  const edit = (record: any) => {
    console.log(record)
  }

  const newHospitalModalEvent = () => {
    setNewHospitalModal(true)
  }

  // 点击取消 
  const setShow = (show: boolean) => {
    setNewHospitalModal(show)
  }

  const columns: any = [
    {
      title: "分组名称",
      dataIndex: "fz",
      key: "fz",
      align: "center",
      width: "auto",
    },
    {
      title: "会诊对象",
      dataIndex: "datetime",
      key: "datetime",
      align: "center",
      width: "auto",
    },
    {
      title: "组长",
      dataIndex: "deptName",
      key: "deptName",
      align: "center",
      width: "auto",
    },
    {
      title: "小组人数",
      dataIndex: "description",
      key: "description",
      align: "center",
      width: "auto",
    },
    {
      title: "会诊得分",
      dataIndex: "descpCode",
      key: "descpCode",
      align: "center",
      width: "auto",
    },
    {
      title: "操作",
      align: "center",
      width: "250px",
      render: (text: string, record: any) => (
        <>
          <Button onClick={() => edit(record)} type="primary" size="small" >编辑</Button>
          <Button onClick={() => del(record)} style={{ margin: "0 15px" }} danger size="small" >删除</Button>
          <Button onClick={() => viewGroupMembers(record)} size="small" >查看组员</Button>
        </>
      )
    },

  ]

  const data = [
    {
      id: "1",
      fz: "分组1",
      datetime: "20210428",
      deptName: "外科2",
      description: "2",
      descpCode: "c5d45",
      type: 1,
      docName: "马医生2"
    },
    {
      id: "2",
      fz: "分组1",
      datetime: "20210428",
      deptName: "内科科",
      description: "3",
      descpCode: "c5d45",
      type: 1,
      docName: "里医生"
    },
    {
      id: "3",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "4",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "4",
      fz: "分组1",
      datetime: "20210428",
      deptName: "内科科",
      description: "5",
      descpCode: "c5d45",
      type: 1,
      docName: "里医生"
    },
    {
      id: "5",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "5",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "6",
      fz: "分组2",
      datetime: "20210428",
      deptName: "内科科",
      description: "66",
      descpCode: "c5d45",
      type: 1,
      docName: "里医生"
    },
    {
      id: "7",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "4",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "8",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "3",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "9",
      fz: "分组1",
      datetime: "20210428",
      deptName: "内科科",
      description: "4",
      descpCode: "c5d45",
      type: 1,
      docName: "里医生"
    },
    {
      id: "10",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "4",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "11",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "4",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "12",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "4",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
    {
      id: "13",
      fz: "分组1",
      datetime: "20210428",
      deptName: "内科科",
      description: "444",
      descpCode: "c5d45",
      type: 1,
      docName: "里医生"
    },
    {
      id: "14",
      fz: "分组1",
      datetime: "20210428",
      deptName: "儿科",
      description: "34",
      descpCode: "c5d45",
      type: 1,
      docName: "好医生"
    },
  ]


  // 切换页数
  const pageOnChange = (pageNumber: number) => {
    console.log(pageNumber)
    setCurrent(pageNumber)
  }
  const showTotal = (total: number, range: number[]) => {
    const page = <div style={{ color: "#999" }}>
      共 {total} 条记录  第 <span style={{ color: "black" }} >{current}</span>   / {Math.ceil(total / 10)} 页
  </div>
    return page
  }
  return (
    <div className={styles.hospitalManagement} >
      <div className={styles.top}>
        <div className={styles.left} >
          全部医院（30）
            <Button size="middle" type="primary" onClick={newHospitalModalEvent} >新建医院</Button>
        </div>
        <div className={styles.right}>
          <Input placeholder="请输入医院" />
          <Button style={{ margin: " 0 10px 0 40px" }} type="primary" size="middle" >搜索</Button>
          <Button size="middle" >重置</Button>
        </div>
      </div>

      <div className={styles.content}>
        <Table
          className="wwwww"
          bordered
          rowKey='id'
          columns={columns}
          dataSource={data}
          pagination={false}
        />
      </div>


      <Pagination
        style={{ textAlign: "center", paddingTop: "3px" }}
        size="small"
        total={85}
        showSizeChanger={false}
        showQuickJumper
        showTotal={showTotal}
        onChange={pageOnChange}
      />


      {/* 新建医院弹框 */}
      <CommonModal
        title="新建医院"
        show={newHospitalModal}
        setShow={setShow}
      >
        <div style={{ paddingBottom: "35px" }} className="newHospitalModal-conten">
          <div style={{ display: "flex", marginBottom: "24px" }}>
            <span>医院名称:</span>
            <Input style={{ width: "280px", marginLeft: "12px" }} placeholder="请输入医院名称" />
          </div>
          <div style={{ display: "flex" }}>
            <span>医院类别:</span>
            <div style={{ marginLeft: "12px" }} >
              <Radio.Group onChange={radioOnChange} value={RadioValue}>
                <Radio value={1}>本院</Radio>
                <Radio value={2}>院外</Radio>
              </Radio.Group>
            </div>
          </div>
        </div>
        <div style={{ textAlign: "center" }}>
          <Button className={styles.cancel} onClick={() => setShow(false)} >
            取消
        </Button>
          <Button className={styles.determine} style={{ marginLeft: "30px" }} type="primary"  >
            确定
        </Button>
        </div>
      </CommonModal>



    </div >
  )
}

export default hospitalManagement
